<template>
  <div>
    <!-- 遮罩层 -->
    <div class="zhe" v-if="isShowOverlay" @click="clickOverlay()">
    </div>
    <!-- 弹出内容 -->
    <div class="boxs" v-if="isShowPayType">
      <div class="lines"></div>
      <h4>支付方式</h4>
      <ul class="count">
        <li @click="choicePayType('balance')">
          <!-- 余额支付 -->
          <img class="img1"
               :src="payType=='balance'?'static/icon_pc/icon/pay_select_1_big.png':'static/icon_pc/icon/pay_default_1_big.png'"
               alt="">
        </li>
        <li @click="choicePayType('wx')">
          <!-- 微信支付 -->
          <img class="img1"
               :src="payType=='wx'?'static/icon_pc/icon/pay_select_3_big.png':'static/icon_pc/icon/pay_default_3_big.png'"
               alt="">
        </li>
      </ul>
      <!-- 余额不足提示 -->
      <div class="spanyebz" v-show="payType=='balance' && parseFloat(userAccount.wallet)<parseFloat(money)">余额不足</div>
      <!-- 合计 -->
      <div class="total">
        <div class="tol">
          <span class="all">合计：<span class="peo">￥{{money}}</span></span>
        </div>
        <span id="btn" @click="paySure()">立即购买</span>
      </div>
    </div>

    <!-- 余额支付窗口 -->
    <div v-if="isShowBalancePayment" class="paybox">
      <div class="paytop">
        <img @click="closeBalancePayment()" class="colse" src="static/icon_pc/icon/close (2).png" alt="">
        <span class="paied">支付</span>
        <span class="makepsd"><router-link to="/editepaypwd">设置支付密码</router-link></span>
      </div>
      <div class="money">￥{{money}}
      </div>
      <div class="paypsd">
        <input v-model="pay_pwd" type="password" placeholder="请输入您的支付密码">
      </div>
      <button @click="balancePaymentSure" class="paybtn">确认支付</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "pay",
    data() {
      return {
        payType: 'balance',   //选中的支付方式
        insufficientBalance: false,
        isShowOverlay: false,
        isShowBalancePayment: false,
        userAccount: {
          wallet: 0,
        },
        wxPayData: {},
        pay_pwd: '', //支付密码
      }
    },
    props: {
      isShowPayType: {},
      choiceId: {},
      money: {}
    },
    watch: {
      isShowPayType() {
        this.isShowOverlay = this.isShowPayType;
      },
    },
    created() {
      this.getUserAccountInfo();
    },
    methods: {
      closeBalancePayment() {  //
        this.isShowBalancePayment = false;
        this.isShowOverlay = false;
      },
      getUserAccountInfo() {//获取账户余额和查询次数
        this.$http.get('api/Welcome/user').then(response => {
          console.log('获取账户余额和查询次数');
          console.log(response)
          this.userAccount = response.data;
        }).catch(error => {

        });
      },
      balancePaymentSure() {   //确认余额支付
        var that = this;
        $.ajax({
          type: "post",
          url: "http://zcapi.hrgsxt.cn/api/Buy/index",
          data: {
            token: localStorage.token,
            money: that.money,
            pay_style: '3',
            package_id: that.choiceId,
            pay_pwd: that.pay_pwd
          },
          cache: false,
          dataType: "json",
          success: function (response) {
            if (response.code == 200) {
              that.$toast({
                message: response.message,
                duration: 1000
              });
              if (that.$store.state.userType == 1) {
                that.$router.push({
                  path: './personalcenter'
                });
              } else if (that.usertype == 2) {
                that.$router.push({
                  path: './corporatecenter'

                });
              }
            } else if (response.code == 400) {
              that.$toast({
                message: response.message,
                duration: 1000
              })
            }
            that.isShowOverlay = false;
            that.isShowBalancePayment = false;
          }
        });
      },
      choicePayType(type) {  //选择支付类型
        this.payType = type;
      },
      paySure() {  //立即购买
        this.$http.get('api/User_safe/index').then(response => {
          if (response.data.pay_pwd == '未设置') {
            this.$toast({
              message: '请先设置支付密码'
            });
            this.$router.push({
              path: "./editepaypwd",
              query: {
                paypwd: response.data.pay_pwd,
              }
            });
          } else {
            if (this.payType === 'balance') {
              if (parseFloat(this.userAccount.wallet) < parseFloat(this.money)) {
                console.log('余额不够');
                this.$toast({
                  message: '余额不足，请选择其他方式支付'
                });
              } else {
                this.$emit('hidePay');
                this.isShowBalancePayment = true;
                setTimeout(() => {
                  this.isShowOverlay = true;
                }, 300)
              }
            } else { //如果tab为1 则为微信支付方式
              console.log('微信支付')
              this.$emit('hidePay');
              let params = {
                money: this.money,
                pay_style: '1',
                package_id: this.choiceId,
                pay_pwd: '',
                token: localStorage.token,
              };
              $.ajax({
                type: 'post',
                url: 'http://zcapi.hrgsxt.cn/api/Buy/index',
                data: params,
                dataType: 'json',
                cache: false,
                success: response => {
                  if (response.code === 200) {
                    this.wxPayData = response.data;
                    if (typeof WeixinJSBridge == "undefined") {
                      if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                      } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                      }
                    } else {
                      this.onBridgeReady();
                    }

                  }
                  this.isShowOverlay = false;
                }
              })

            }
          }
        }).catch(error => {

        });
      },
      onBridgeReady() { //微信支付
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": this.wxPayData.appId, //公众号名称，由商户传入
            "timeStamp": this.wxPayData.timeStamp, //时间戳，自1970年以来的秒数
            "nonceStr": this.wxPayData.nonceStr, //随机串
            "package": this.wxPayData.package,
            "signType": this.wxPayData.signType, //微信签名方式：
            "paySign": this.wxPayData.paySign //微信签名
          },
          (res) => {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              if (this.$store.state.userType == 1) {
                this.$router.push({
                  path: './Personalcenter'
                });
              } else {
                this.$router.push({
                  path: './corporatecenter'
                });
              }
            } else {
              this.$toast("微信支付失败");
            }
          });

      },
      clickOverlay() {
        console.log('点击遮罩层');
        this.$emit('hidePay');
        this.isShowOverlay = false;
        this.isShowBalancePayment = false;
      }

    }

  }
</script>

<style scoped>
  .buy {
    width: 100%;
  }

  .zhe {
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.4;
    z-index: 1
  }

  /* 头部 */

  .my_header {
    width: 100%;
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    /* position: relative; */
    position: fixed;
    top: 0rem;
    left: 0rem;
    padding: 0 .2rem;
  }

  .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .boxs {
    width: 100%;
    height: 4.2rem;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    border-radius: 25px 25px 0px 0px;
    z-index: 9
  }

  .top1 {
    display: inline-block;
    margin-left: -.25rem
  }

  /* 支付方式 */

  .boxs .lines {
    width: 1.6rem;
    height: .1rem;
    background: rgba(204, 204, 204, 1);
    border-radius: 5px;
    position: absolute;
    top: .2rem;
    left: 50%;
    margin-left: -.8rem;
  }

  .boxs h4 {
    font-size: .3rem;
    color: #333;
    position: absolute;
    top: 25%;
    left: .3rem;
  }

  .count {
    margin-top: 17%;
  }

  .count li {
    float: left;
  }

  .count li:nth-child(2) {
    margin: 0;
    margin-left: .15rem;
    margin-right: .15rem;
  }

  .count li img {
    width: 2.2rem;
    height: .88rem;
  }

  .spanyebz {
    color: red;
    margin: -0.06rem 0px 0.2rem .35rem;
    font-size: 0.18rem;
  }

  /* 总计 */

  .total {
    height: .88rem;
    line-height: .88rem;
    width: 100%;
    border-top: .01rem solid #ccc;
    position: fixed;
    bottom: 0;
  }

  .total .tol {
    float: left;
    padding-left: 0.3rem;
  }

  .all {
    font-size: .3rem;
    color: #333;
  }

  .all .peo {
    color: #ff3000;
  }

  #btn {
    display: block;
    width: 2.2rem;
    height: .88rem;
    color: #fff;
    font-size: .3rem;
    line-height: .88rem;
    text-align: center;
    border: none;
    background-color: #0085f0;
    border-radius: 0;
    float: right;
  }

  /* 头部结束 */
  /* 套餐分类开始 */

  ul {
    width: 100%;
    background-color: #fff;
    padding: .3rem;
    overflow: hidden;
    margin-top: .88rem;
  }

  .list {
    width: 31.6%;
    height: 2.8rem;
    text-align: center;
    position: relative;
    float: left;
    margin-bottom: .15rem;
    border: .01rem solid #ccc;
  }

  .list:nth-child(3n-1) {
    margin: 0 .15rem 0 .15rem;
  }

  .one {
    height: .26rem;
    font-size: .28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
  }

  .price {
    margin-top: .39rem;
    line-height: 36px;
  }

  .price .danjia {
    font-size: .22rem;
    color: #999;
    padding-right: .05rem;
  }

  .price .money {
    color: #FF3000;
    font-size: .5rem;
    height: .38rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
  }

  .line {
    width: 1.8rem;
    border-top: .0001rem dashed #ccc;
    position: absolute;
    top: 70%;
    left: 50%;
    margin-left: -.9rem;
  }

  .number {
    height: .21rem;
    font-size: .22rem;
    color: #999;
    font-weight: 500;
    line-height: .36rem;
    padding-top: .7rem;
  }

  .active {
    border: .01rem solid #0085F0;
  }

  .select {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  /* 套餐分类结束 */
  /* 确定按钮 */

  .button {
    font-size: .3rem;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
    color: #fff;
    position: absolute;
    bottom: 0;
    /* 解决1px边框问题 */
    border: .01rem;
    background-color: #0085F0;
  }

  /* 余额支付弹窗 */

  .paybox {
    width: 5.61rem;
    height: 5.69rem;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -2.8rem;
    padding: 0 .3rem;
    background-color: #fff;
    z-index: 999;
  }

  .paybox .paytop {
    height: 1rem;
    line-height: 1rem;
  }

  .paybox .colse {
    width: .23rem;
    height: .23rem;
    border: .001rem dashed #efefef;
  }

  .paied {
    margin-left: 36%;
    font-size: .36rem;
    font-weight: bold;
    color: #333;
  }

  .paybox .makepsd {
    float: right;
    color: #1B84E3;
    font-size: .3rem;
  }

  .paybox .money {
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    color: #333;
    font-size: .72rem;
    font-weight: bold;
  }

  .paybtn {
    width: 100%;
    height: .95rem;
    color: #fff;
    font-size: .36rem;
    text-align: center;
    background-color: #16AD12;
    margin-top: .3rem;
  }
</style>
